import { Space, Tag } from 'antd'
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Navigate } from 'react-router-dom'
import { closeTab } from '../../store/reducers/tab'
import './index.css'

const CommonTag = () => {
  const tabsList = useSelector((state) => state.tab.tabList)
  const currentMenu = useSelector((state) => state.tab.currentMenu)
  const dispatch = useDispatch()

  const handleClose = (tag, index) => {
    dispatch(
      closeTab({
        index,
      })
    )
  }

  const handleChange = (item) => { }

  // 处理tab的显示逻辑
  const setTag = (flag, item, index) => {
    return flag ? (
      <Tag color="#55acee" closeIcon onClose={() => handleClose(item, index)}>
        {item.label}
      </Tag>
    ) : (
      <Tag key={item.name} onClick={() => handleChange(item)}>
        {item.label}
      </Tag>
    )
  }

  return (
    <Space className="common-tag" size={[0, 8]} wrap>
      {/* <Tag>首页</Tag>
      <Tag closeIcon color="#55acef" onClose={() => handleClose()}>用户列表</Tag> */}
      {tabsList.map((item, index) =>
        setTag(item.path === currentMenu.path, item, index)
      )}
    </Space>
  )
}

export default CommonTag
